<template>
  <div
      class="diy_edit venue_arrangement_edits page_venue_arrangement"
      id="venue_arrangement_edit"
  >
    <el-form
        :model="form"
        ref="ruleFormRef" 
		:rules="rules"
        label-width="auto"
        class="edit_venue_arrangement_form"
        size="large"
    >
      <el-row class="row_e">
          <el-col v-if="$check_field('ger','venue_name','/venue_arrangement/view') || $check_field('add','venue_name','/venue_arrangement/view') || $check_field('set','venue_name','/venue_arrangement/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="场次名称" prop="venue_name">
                      <el-input id="venue_name" v-model="form['venue_name']" placeholder="请输入场次名称"
                      v-if="(form['venue_arrangement_id'] && $check_field('set','venue_name','/venue_arrangement/view')) || (!form['venue_arrangement_id'] && $check_field('add','venue_name','/venue_arrangement/view'))" :disabled="disabledObj['venue_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','venue_name','/venue_arrangement/view')">{{form['venue_name']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','venue_arrangement','/venue_arrangement/view') || $check_field('add','venue_arrangement','/venue_arrangement/view') || $check_field('set','venue_arrangement','/venue_arrangement/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="场次安排" prop="venue_arrangement">
                      <el-input id="venue_arrangement" v-model="form['venue_arrangement']" placeholder="请输入场次安排"
                      v-if="(form['venue_arrangement_id'] && $check_field('set','venue_arrangement','/venue_arrangement/view')) || (!form['venue_arrangement_id'] && $check_field('add','venue_arrangement','/venue_arrangement/view'))" :disabled="disabledObj['venue_arrangement_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','venue_arrangement','/venue_arrangement/view')">{{form['venue_arrangement']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','activity_arrangement','/venue_arrangement/view') || $check_field('add','activity_arrangement','/venue_arrangement/view') || $check_field('set','activity_arrangement','/venue_arrangement/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动安排" prop="activity_arrangement">
                <el-select id="activity_arrangement" v-model="activity_arrangement_multiple_value" multiple @change="select_activity_arrangement_multiple"
                       v-if="(form['venue_arrangement_id'] && $check_field('set','activity_arrangement','/venue_arrangement/view')) || (!form['venue_arrangement_id'] && $check_field('add','activity_arrangement','/venue_arrangement/view'))">
              <el-option v-for="o in list_activity_arrangement" :key="o['activity_type']" :label="o['activity_type']"
                         :value="o['activity_type']">
              </el-option>
            </el-select>
            <div v-else-if="$check_field('ger','activity_arrangement','/venue_arrangement/view')">{{form['activity_arrangement']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','event_location','/venue_arrangement/view') || $check_field('add','event_location','/venue_arrangement/view') || $check_field('set','event_location','/venue_arrangement/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动地点" prop="event_location">
                <el-select id="event_location" v-model="event_location_multiple_value" multiple @change="select_event_location_multiple"
                       v-if="(form['venue_arrangement_id'] && $check_field('set','event_location','/venue_arrangement/view')) || (!form['venue_arrangement_id'] && $check_field('add','event_location','/venue_arrangement/view'))">
              <el-option v-for="o in list_event_location" :key="o['location_information']" :label="o['location_information']"
                         :value="o['location_information']">
              </el-option>
            </el-select>
            <div v-else-if="$check_field('ger','event_location','/venue_arrangement/view')">{{form['event_location']}}</div>
              </el-form-item>
        </el-col>
        </el-row>
      <div v-if="$check_action('/venue_arrangement/view','set') || $check_action('/venue_arrangement/view','add') || $check_option('/venue_arrangement/table','examine')" class="footer">
        <el-button type="primary" @click="onSubmit" size="large">提交</el-button>
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
      <div v-else class="footer">
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
  import {ElMessage} from "element-plus";
  import {ref, onMounted} from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import {useStore} from "vuex";
  import { useRouter, useRoute } from "vue-router";
  import {
          $check_field,
          $fullUrl,
          $banseUrl,
          $check_action,
          $getUrlParams,
          filterSensitiveWords,
          $get_stamp,
          $get_rand,
          $toTime,
          $push
  } from "@/utils/utils.js";

  let router = useRouter();
  let route = useRoute();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let user_id = storageHelper.getUserInfo().user_id;
  let user_group = storageHelper.getUserInfo().user_group;
  let venue_arrangement_id = $getUrlParams().venue_arrangement_id;
  let url_add = ref("/api/venue_arrangement/add");
  let url_set = ref("/api/venue_arrangement/set");
  let field = ref("venue_arrangement_id")
  let url_get_obj = ref("/api/venue_arrangement/get_obj");
  let url_upload = ref("/api/venue_arrangement/upload");
  let ruleFormRef = ref(null);
  
  let rules = ref({
				  });

  let disabledObj = ref({
      "venue_name_isDisabled": false,
        "venue_arrangement_isDisabled": false,
        "activity_arrangement_isDisabled": false,
        "event_location_isDisabled": false,
    });
  let form = ref({
    "venue_name":  '', // 场次名称
      "venue_arrangement":  '', // 场次安排
      "activity_arrangement":  '', // 活动安排
      "event_location":  '', // 活动地点
      "venue_arrangement_id": 0, // ID
  });
  
    
            let activity_arrangement_multiple_value = ref([]);
        // 活动安排选项列表
  let list_activity_arrangement = ref([""]);
  
            let event_location_multiple_value = ref([]);
        // 活动地点选项列表
  let list_event_location = ref([""]);
  
                                                          //获取标签列表
    let get_list_activity_arrangement = async () => {
      let json = await $get("/api/offline_activities/get_list");
      if (json.result && json.result.list) {
        list_activity_arrangement.value = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    }
                    let select_activity_arrangement_multiple = (v) => {
      form.value.activity_arrangement = "";
      if (v && v.length > 0) {
        form.value.activity_arrangement = v.toString();
      }
    };
                                    //获取标签列表
    let get_list_event_location = async () => {
      let json = await $get("/api/classification_information/get_list");
      if (json.result && json.result.list) {
        list_event_location.value = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    }
                    let select_event_location_multiple = (v) => {
      form.value.event_location = "";
      if (v && v.length > 0) {
        form.value.event_location = v.toString();
      }
    };
                      //提交前验证事件
  let submit_check = () => {
                                  };
  // 点击取消
  let cancel = () => {
    router.go(-1);
  };
  // 点击提交
  let onSubmit = async () => {
    let valid = await ruleFormRef.value.validate();
    if (valid) {
      // 提交表单
      if (venue_arrangement_id) {
        // 编辑
        delete form.value.update_time;
              $post(url_set.value + "?venue_arrangement_id=" + venue_arrangement_id, form.value).then((res) => {
          if (res.result) {
          router.push("/home/venue_arrangement/table");
          ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      } else {
        // 新增
              $post(url_add.value, form.value).then((res) => {
          if (res.result) {
              router.push("/home/venue_arrangement/table");
              ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      }
    } else {
      ElMessage.error(msg);
    }
  };
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    let ret = "";
    if (obj) {
      if (obj.nickname) {
        ret = obj.nickname;
      } else {
        ret = obj.username;
      }
    }
    return ret;
  };
  //获取对象之前
  let get_obj_before = (param) => {
    var formArr = "";
                                  if(form.value && formArr){
      Object.keys(form.value).forEach(key => {
        Object.keys(formArr).forEach(dbKey => {
          if(key === dbKey){
            disabledObj.value[key+'_isDisabled'] = true;
          }
        })
      })
    }
                    localStorage.removeItem('form')
    return param;
  }
  // js判断字段是否是时间戳格式
  let isTimestamp = (value) => {
    return /^\d{10}$/.test(value) || /^\d{13}$/.test(value);
  }
  //获取对象之后
  let get_obj_after = (json, func) => {
                                                                                              if (form.value.activity_arrangement){
                  activity_arrangement_multiple_value = form.value.activity_arrangement.split(",")
          }
                                              if (form.value.event_location){
                  event_location_multiple_value = form.value.event_location.split(",")
          }
                  }
  let is_view = () => {
    var bl = user_group == "管理员";
    if (!bl) {
      bl = $check_action('/venue_arrangement/table', 'add');
      console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
    }
    if (!bl) {
      bl = $check_action('/venue_arrangement/table', 'set');
      console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
    }
    if (!bl) {
      bl = $check_action('/venue_arrangement/view', 'add');
      console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
    }
    if (!bl) {
      bl = $check_action('/venue_arrangement/view', 'set');
      console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
    }
    if (!bl) {
      bl = $check_action('/venue_arrangement/view', 'get');
      console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
    }
    console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");
    return bl;
  }
  // 获取详情
  let get_venue_arrangement_obj = async () => {
    let list = await $get("/api/venue_arrangement/get_obj?venue_arrangement_id=" + venue_arrangement_id);
    form.value = list.result.obj;
    get_obj_after();
  };
  onMounted(() => {
              get_list_activity_arrangement();
          get_list_event_location();
        if (venue_arrangement_id) {
      get_venue_arrangement_obj();
    }else {
      get_obj_before();
      get_obj_after();
    }

  });
</script>

<style scoped lang="less">
  .diy_edit {
    width: 100%;

    .edit_venue_arrangement_form {
      max-width: 80%;
      margin: 90px auto;

      .fn {
        width: 100%;
      }
    }

    img {
      width: 100px;
      height: 100px;
    }

    .edit_list_venue_arrangement_sell {
      width: 80%;
      margin: 90px auto;
    }

    .footer {
      text-align: center;
    }
  }
</style>
  